{% extends "templates/base.html" %}


{% block title%}View Profile{% endblock %}

{% block javascript %}
<script src="/scripts/scriptaculous/1.8.1/prototype.js" type="text/javascript"></script>
<script src="/scripts/scriptaculous/1.8.1/scriptaculous.js" type="text/javascript"></script>
<script src="/scripts/roadmate/edit.js" type="text/javascript"></script>

<script type="text/javascript" language="javascript">
	// <![CDATA[

	document.observe('dom:loaded', function() {
		{% ifequal current_user target_user %}
			editTextControl('first_name', '/ajax/edit_profile?user=' + {{ target_user.key.id }})
			editTextControl('last_name', '/ajax/edit_profile?user=' + {{ target_user.key.id }})
			editTextControl('town', '/ajax/edit_profile?user=' + {{ target_user.key.id }})
			editTextControl('phone', '/ajax/edit_profile?user=' + {{ target_user.key.id }})
		{% endifequal %}
	});

	// ]]>
</script>
{% endblock %}

{% block main %}

   <h2>view profile</h2>

	<h3>{{ target_user.get_name_tag}}</h3>
{% ifequal target_user current_user %} <!-- display instruction for the edit fields -->
<p>
<strong>Since this is your own profile, you can edit some of the information.</strong><br/>
	If you move your mouse over a field and it turns green, you can click on it, change the value, click away
	and your profile information will be updated. This information is visible to other RoadMate users.
</p>
{% endifequal %}
	<form>
	<div class="inputgroup">
		<div>
			<label>Email</label>
			{{ target_user.user.email }} <a href="/feedback?id={{ target_user.key.id}}">View Feedback</a></br>
		</div>
	    <br/>

		<div>
			<label for="first_name">First Name</label>
			<p id="first_name" class="inplaceeditor-text">{{ target_user.first_name|escape }}</p>
		</div>
		<div>
			<label for="last_name">Last Name</label>
			<p id="last_name" class="inplaceeditor-text">{{ target_user.last_name|escape}}</p>
		</div>
		<br/>

		<div>
			<label for="town">Hometown</label>
			<p id="town" class="inplaceeditor-text">{{ target_user.town|escape }}</p></br>
		</div>
		<div>
			<label for="phone">Phone</label>
			<p id="phone" class="inplaceeditor-text">{{ target_user.phone|escape }}</p></br>
		</div>
	</div>
	</form>

{% if my_rides %}
<p/><hr/>
<h2>this user's rides</h2>
	<table class="roadmate-list">
			{% for ride in my_rides %}
				<tr class="list-item">
				    <tr class="list-row">
				        {% if not ride.is_full %}<th rowspan="2" class="list-header"></th>{% else %}<th rowspan="2" class="list-header-red"> {% endif %}
		    			<td> {{ride.date|date_for_table }}</td>
		     			<td> {{ride.owner.get_name_tag}} </td>
		     			<td> {{ride.status}} </td>
					</tr>
				    <tr class="list-row">
					    <td colspan=3><strong><a href="/ride?id={{ ride.key.id }}">{{ ride.get_name }}</strong></a>
						</td>
					</tr>
				</tr> <!-- end list item -->

			{% endfor %}
	</table>

{% endif %}

{% endblock %}
